import React from 'react';
import BaseComponent from '@/components/BaseComponent';
import styled from 'styled-components';
import moment from 'moment';
import { connect } from 'dva';
import styles from './index.less';
import {
  Card,
  Col,
  Divider,
  Icon,
  Modal,
  Row,
  Select,
  Spin,
  Statistic,
  Typography,
  Tree,
  DatePicker,
  Form,
  notification,
} from 'antd';
import { Pie } from '@ant-design/charts';
import AntVMap from '@/pages/DataScreen/map/AntVMap';
import { Axis, Chart, Geom, Legend, Tooltip } from 'bizcharts';
import DataSet from '@antv/data-set';
import anhuiMap from '@/assets/anhuiMap.png';
import request from '@/utils/request';

const { Title } = Typography;
const { Option } = Select;
const { TreeNode, DirectoryTree } = Tree;
const DataScreenDiv = styled.div`
  min-height: 100vh;
  height: 100vh;
  position: relative;

  * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }

  .level1box {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  .floatBox {
    position: absolute;
    top: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
  }

  .headerGroup {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding-right: 32px;
    padding-left: 32px;

    .title {
      margin-top: 16px;
      color: white;
      font-weight: 400;
      font-size: 28px;
      font-family: 'Microsoft YaHei';
      text-align: center;
    }

    .subTitle {
      width: 100%;
      text-align: right;

      .label {
        color: #efad5b;
        font-size: 16px;
      }

      .updateTime {
        margin-left: 16px;
        padding: 4px 12px;
        color: white;
        font-size: 14px;
        background-color: #2e37ac;
        border-radius: 15px;
      }

      .settingIcon {
        margin-left: 8px;
        color: white;
        cursor: pointer;
      }
    }

    .analyseBox {
      display: flex;
      flex: 1;
      width: 100%;
      padding-top: 16px;

      .tag {
        width: 5px;
        height: 100%;
        background-color: #4fe3c2;
        border-radius: 2px;
      }

      .labelBox {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
        margin-right: 10px;
        margin-left: 10px;
      }

      .label {
        color: white;
        font-weight: 400;
        font-size: 24px;
        font-family: 'Microsoft YaHei';
        line-height: 1.2;
      }

      .cardBox {
        flex: 1;
        height: 100%;

        .heightMax {
          height: 100%;
        }
      }

      .card {
        width: 100%;
        height: 100%;
        color: white;
        background: linear-gradient(to bottom, #8814f9, #149ed7);
        border-color: #4b73ff;
      }

      .mdivider {
        margin-top: 8px;
        margin-right: 0;
        margin-bottom: 0px;
        margin-left: 0;
        background-color: white;
        opacity: 0.5;
      }
    }
  }

  .level2box {
    flex: 1;
    width: 100%;
    height: 120%;
    padding: 16px 32px;
    .card {
      background-color: #ffffff;
      border: 1px solid #e8e8e8;
      border-radius: 8px;
    }

    .mapBox {
      width: 100%;
      height: 100%;
      padding: 16px;
      background-image: url(${anhuiMap});
      background-repeat: no-repeat;
      background-size: cover;
    }

    .echartsBox {
      display: flex;
      flex-direction: column;
      width: 100%;
      height: 100%;
      padding: 16px;

      .floor {
        display: flex;
        flex: 1;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
      }
    }
  }

  .bluePart {
    width: 100%;
    height: calc(100vh * 0.35);
    background-color: #414df5;
  }

  .whirtPart {
    width: 100%;
    height: calc(100vh * 0.7);
    background-color: #fff;
  }

  .ant-card-body {
    padding: 8px 12px;
  }
`;

@connect(({ user, dataScreen, loading }) => ({
  currentUser: user.currentUser,
  isLoading: loading.effects['dataScreen/getDataScreen'],
  isPreparing: loading.effects['dataScreen/getAreaCancerCount'],
}))
class DataScreen extends BaseComponent {
  constructor(props) {
    super(props);
    this.state = {
      // 当前年份
      year: moment().format('YYYY'),
      // 当前日期
      now: moment().format('YYYY年MM月DD日'),
      // 当前的月份
      month: moment().format('M'),
      // 选中的月份
      selectedMonth: moment().format('M'),
      // 最新更新时间
      updateTime: moment().format('HH:mm:ss'),
      // 统计:初始数据上报
      count4cssb: 0,
      // 统计:初始数据正式库
      count4cszsk: 0,
      // 统计:详情数据上报
      count4xqsb: 0,
      // 统计:详情数据正式库
      count4xqzsk: 0,
      // 统计:内镜检查人数
      count4nj: 0,
      // 统计:胃镜检查人数
      count4wj: 0,
      // 数据源:各地市数据上报情况
      data4Chart1: [],
      // 食管癌分布
      data4pie1: [],
      // 胃癌
      data4pie2: [],
      // 贲门癌
      data4pie3: [],
      data4pie4: [],
      // 被选中的城市名称
      selectedCityName: '',
      // title
      title: '(安徽全省)',
      cityName: '',
      // 设置对话框的可见性
      settingModalVisible: false,
      // 头部crad 中的统计数据
      visible: false,
      orgId: undefined, // 当前选中的医院
      zbgl: {
        allTaskNum: 0,
        followupL: '0',
        followupNum: 0,
        highRiskNum: 0,
        neigongNum: 0,
        positiveL: '0',
        positiveNum: 0,
        selfTestNum: 0,
        treatmentL: '0',
        treatmentNum: 0,
        zzL: '0',
        zzNum: 0,
      },
      hospitalTree: [],
      hospitalMapData: {},
      selectedCode: '',
      csOver: 0,
      sfOver: 0,
      zlOver: 0,
      rwOver: 0,
      cs: 0,
      sf: 0,
      zl: 0,
      rw: 0,
      list: [],
    };
  }

  componentDidMount() {
    this.getDataScreen({ year: this.state.year });
    this.getHospitalTree();
  }

  /**
   * 初始化大屏数据
   * */
  getDataScreen = params => {
    // if (this.props.isLoading) {
    //   return;
    // }
    this.execHttp('dataScreen/getDataScreen', params).then(resp => {
      const { success, data } = resp;
      console.log(success, data);
      if (success) {
        const { zbgl } = data;
        this.setState({
          zbgl,
        });
      }
    });

    // this.execHttp('dataScreen/getDataScreen').then(resp => {
    //   const { success, data } = resp;
    //   if (success) {
    //     const {
    //       cssjsb_total,
    //       cssjshzsk_total,
    //       xqsjsb_total,
    //       xqsjsbzsk_total,
    //       njjc_total,
    //       wjjc_total,
    //       histogram_json,
    //       zbgl,
    //       list,
    //     } = data;

    //     this.setState({
    //       zbgl,
    //     });

    //     let cs = 0,
    //       sf = 0,
    //       zl = 0,
    //       rw = 0;
    //     let csOver = 0,
    //       sfOver = 0,
    //       zlOver = 0,
    //       rwOver = 0;

    //     // // 柱状图json集合转换为数组
    //     // const total_arr = JSON.parse(histogram_json);
    //     // // 分组1
    //     const obj1 = { name: '初筛完成情况' };
    //     list.forEach(each => {
    //       const { orgName, csOverNum, csNum } = each;
    //       console.log(cs, csOver, 'csOver');
    //       obj1[orgName] = csOverNum ? csOverNum : 0;
    //       cs += csNum ? csNum : 0;
    //       csOver += csOverNum ? csOverNum : 0;
    //     });

    //     // // 分组2
    //     const obj2 = { name: '随访完成情况' };
    //     list.forEach(each => {
    //       const { orgName, sfOverNum, sfNum } = each;
    //       obj2[sfOverNum] = sfOverNum ? sfOverNum : 0;
    //       sf += sfNum ? sfNum : 0;
    //       sfOver += sfOverNum ? sfOverNum : 0;
    //     });

    //     // 分组3 胃镜数据
    //     const obj3 = { name: '治疗完成情况' };
    //     list.forEach(each => {
    //       const { orgName, zlOverNum, zlNum } = each;
    //       obj3[orgName] = zlOverNum ? zlOverNum : 0;
    //       zl += zlNum ? zlNum : 0;
    //       zlOver += zlOverNum ? zlOverNum : 0;
    //     });

    //     const obj4 = { name: '任务完成情况' };
    //     list.forEach(each => {
    //       const { orgName, rwOverNum, rwNum } = each;
    //       obj4[orgName] = rwOverNum ? rwOverNum : 0;
    //       rw += rwNum ? rwNum : 0;
    //       rwOver += rwOverNum ? rwOverNum : 0;
    //     });
    //     const columnDatas = [obj1, obj2, obj3, obj4];

    //     this.setState(
    //       {
    //         csOver,
    //         sfOver,
    //         zlOver,
    //         rwOver,
    //         cs,
    //         sf,
    //         zl,
    //         rw,
    //         // // 统计:初始数据上报
    //         // count4cssb: cssjsb_total,
    //         // // 统计:初始数据正式库
    //         // count4cszsk: cssjshzsk_total,
    //         // // 统计:详情数据上报
    //         // count4xqsb: xqsjsb_total,
    //         // // 统计:详情数据正式库
    //         // count4xqzsk: xqsjsbzsk_total,
    //         // // 统计:内镜检查人数
    //         // count4nj: njjc_total,
    //         // // 统计:胃镜检查人数
    //         // count4wj: wjjc_total,
    //         // 柱状图
    //         data4Chart1: [...columnDatas],
    //         list, // 饼状图统计数据相关
    //       },
    //       () => {
    //         this.assignData();
    //       }
    //     );
    //   }
    // });
  };

  /**
   * 点击地图板块，改变饼图数据
   * */
  changPieChartData = () => {
    if (this.props.isPreparing) {
      return;
    }
    this.execHttp('dataScreen/getAreaCancerCount', {
      areaName: this.state.selectedCityName,
      month: this.state.month,
    }).then(resp => {
      const { success, data } = resp;
      if (success) {
        const { dataScreen, basicData, monthData } = data;
        this.assignData(dataScreen);
        this.handleBarData(monthData);
        this.updateCardViewData(basicData);
      }
    });
  };

  /**
   * 改变柱状图数据
   * */
  handleBarData = data => {
    const { init, detail, wjcounts } = data;
    // 分组1
    const obj1 = { name: '初始数据' };
    if (init) {
      init.forEach(each => {
        const { ext_flag, cssjshzsk_total } = each;
        obj1[ext_flag] = cssjshzsk_total;
      });
    }

    // 分组2
    const obj2 = { name: '详情数据' };
    if (detail) {
      detail.forEach(each => {
        const { ext_flag, xqsjsbzsk_total } = each;
        obj2[ext_flag] = xqsjsbzsk_total;
      });
    }

    // 分组3 胃镜数据
    const obj3 = { name: '胃镜数据' };
    if (wjcounts) {
      wjcounts.forEach(each => {
        const { ext_flag, wjjc_total } = each;
        obj3[ext_flag] = wjjc_total;
      });
    }

    const columnDatas = [obj1, obj2, obj3];

    this.setState({
      // 柱状图
      data4Chart1: [...columnDatas],
    });
  };

  /**
   * 更新顶部卡片数据
   * */
  updateCardViewData = data => {
    // 更新顶部卡片数据
    const {
      cssjsb_total = 0,
      cssjshzsk_total = 0,
      xqsjsb_total = 0,
      xqsjsbzsk_total = 0,
      njjc_total = 0,
      wjjc_total = 0,
    } = data;
    this.setState({
      // 统计:初始数据上报
      count4cssb: cssjsb_total,
      // 统计:初始数据正式库
      count4cszsk: cssjshzsk_total,
      // 统计:详情数据上报
      count4xqsb: xqsjsb_total,
      // 统计:详情数据正式库
      count4xqzsk: xqsjsbzsk_total,
      // 统计:内镜检查人数
      count4nj: njjc_total,
      // 统计:胃镜检查人数
      count4wj: wjjc_total,
    });
  };

  /**
   * 处理饼图数据
   * */
  assignData = () => {
    const { csOver, sfOver, zlOver, rwOver, cs, sf, zl, rw } = this.state;
    console.log(sfOver, zlOver, rwOver, cs, sf, zl, rw);

    const data4pie1 = [
      {
        type: '总量',
        value: csOver,
      },
      {
        type: '确诊',
        value: cs,
      },
    ];
    // 胃癌
    const data4pie2 = [
      {
        type: '总量',
        value: sf,
      },
      {
        type: '确诊',
        value: sfOver,
      },
    ];
    // 贲门癌
    const data4pie3 = [
      {
        type: '总量',
        value: zl,
      },
      {
        type: '确诊',
        value: zlOver,
      },
    ];
    const data4pie4 = [
      {
        type: '总量',
        value: rw,
      },
      {
        type: '确诊',
        value: rwOver,
      },
    ];
    this.setState({
      // 食管癌分布
      data4pie1,
      // 胃癌
      data4pie2,
      // 贲门癌
      data4pie3,
      data4pie4,
    });
  };

  /**
   * 返回环形图的config
   * @param data
   * @returns {{statistic: {title: string, content: string}, data, color: string[], legend: {layout: string, position: string}, label: {rotate: boolean, style: {fontSize: number, fill: string, opacity: number}}, colorField: string, interactions: [{type: string},{type: string},{type: string}], meta: {value: {formatter: (function(*): string)}}, appendPadding: number, radius: number, innerRadius: number, angleField: string, height: number}}
   */
  getPieConfig = data => {
    const config = {
      appendPadding: 10,
      data: data,
      color: ['#507BFF', '#FF0050'],
      angleField: 'value',
      colorField: 'type',
      height: 200,
      radius: 0.7,
      innerRadius: 0.8,
      meta: {
        value: {
          formatter: v => `${v} `,
        },
      },
      legend: {
        layout: 'horizontal',
        position: 'bottom',
      },
      statistic: {
        title: '',
        content: '',
      },
      // 添加 中心统计文本 交互
      interactions: [
        {
          type: 'element-selected',
        },
        {
          type: 'element-active',
        },
        {
          type: 'pie-statistic-active',
        },
      ],
      label: {
        style: {
          fill: '#595959',
          opacity: 0.6,
          fontSize: 12,
        },
        rotate: true,
      },
    };

    return config;
  };

  /**
   * 返回柱状图的数据源
   * @returns {*}
   */
  getColumnChartData = () => {
    const { data4Chart1: data } = this.state;
    const ds = new DataSet();
    const dv = ds.createView().source(data);
    dv.transform({
      type: 'fold',
      fields: data.length > 0 ? Object.keys(data[0]).filter(each => each != 'name') : [],
      // 展开字段集
      key: '月份',
      // key字段
      value: '上报个数', // value字段
    });
    console.log(dv, 'dv');
    return dv;
  };
  // 选择医院
  onSelect = (checkedKeys, info) => {
    const { list } = this.state;
    console.log('onCheck', info);
    console.log(list);

    const data4pie1 = [
      {
        type: '总量',
        value: 0,
      },
      {
        type: '确诊',
        value: 0,
      },
    ];
    // 胃癌
    const data4pie2 = [
      {
        type: '总量',
        value: 0,
      },
      {
        type: '确诊',
        value: 0,
      },
    ];
    // 贲门癌
    const data4pie3 = [
      {
        type: '总量',
        value: 0,
      },
      {
        type: '确诊',
        value: 0,
      },
    ];
    const data4pie4 = [
      {
        type: '总量',
        value: 0,
      },
      {
        type: '确诊',
        value: 0,
      },
    ];

    for (let index = 0; index < list.length; index++) {
      const element = list[index];
      console.log(checkedKeys);
      if (element.orgId == checkedKeys[0]) {
        data4pie1[0].value = element.csNum ? element.csNum : 0;
        data4pie1[1].value = element.csOverNum ? element.csOverNum : 0;

        data4pie2[0].value = element.sfNum ? element.sfNum : 0;
        data4pie2[1].value = element.sfOverNum ? element.sfOverNum : 0;

        data4pie3[0].value = element.rwNum ? element.rwNum : 0;
        data4pie3[1].value = element.rwOverNum ? element.rwOverNum : 0;

        data4pie3[0].value = element.zlNum ? element.zlNum : 0;
        data4pie3[1].value = element.zlOverNum ? element.zlOverNum : 0;
      }
    }

    // if (!info.selectedNodes[0].props.isHospital) {
    //   console.log('onCheck', checkedKeys, info);
    // }

    this.setState({
      // 食管癌分布
      data4pie1,
      // 胃癌
      data4pie2,
      // 贲门癌
      data4pie3,
      data4pie4,
    });
  };

  handleDatePickerChange = (value, mode) => {
    const year = moment(value).format('YYYY');
    this.setState(
      {
        year,
      },
      () => {
        this.getDataScreen({ year });
        this.getHospitalDataInit({
          year: year,
          cityCode: this.state.selectedCode,
          orgId: this.state.orgId,
        });
      }
    );
  };
  // 选择学校
  onSelectHospitalChange = value => {
    this.setState({
      orgId: value,
    });

    const params = {
      year: this.state.year,
      cityCode: this.state.selectedCode,
      orgId: value,
    };

    this.getHospitalDataInit(params);
  };

  getHospitalDataInit = params => {
    this.execHttp('dataScreen/getHospitalDataInit', params).then(res => {
      // console.log(res.success);
      if (res.success) {
        const list = res.data.list;
        let cs = 0,
          sf = 0,
          zl = 0,
          rw = 0;
        let csOver = 0,
          sfOver = 0,
          zlOver = 0,
          rwOver = 0;

        // // 柱状图json集合转换为数组
        // const total_arr = JSON.parse(histogram_json);
        // // 分组1
        const obj1 = { name: '初筛完成情况' };
        list.forEach(each => {
          const { orgName, csOverNum, csNum } = each;
          console.log(cs, csOver, 'csOver');
          obj1[orgName] = csOverNum ? csOverNum : 0;
          cs += csNum ? csNum : 0;
          csOver += csOverNum ? csOverNum : 0;
        });

        // // 分组2
        const obj2 = { name: '随访完成情况' };
        list.forEach(each => {
          const { orgName, sfOverNum, sfNum } = each;
          obj2[sfOverNum] = sfOverNum ? sfOverNum : 0;
          sf += sfNum ? sfNum : 0;
          sfOver += sfOverNum ? sfOverNum : 0;
        });

        // 分组3 胃镜数据
        const obj3 = { name: '治疗完成情况' };
        list.forEach(each => {
          const { orgName, zlOverNum, zlNum } = each;
          obj3[orgName] = zlOverNum ? zlOverNum : 0;
          zl += zlNum ? zlNum : 0;
          zlOver += zlOverNum ? zlOverNum : 0;
        });

        const obj4 = { name: '任务完成情况' };
        list.forEach(each => {
          const { orgName, rwOverNum, rwNum } = each;
          obj4[orgName] = rwOverNum ? rwOverNum : 0;
          rw += rwNum ? rwNum : 0;
          rwOver += rwOverNum ? rwOverNum : 0;
        });
        const columnDatas = [obj1, obj2, obj3, obj4];

        this.setState(
          {
            csOver,
            sfOver,
            zlOver,
            rwOver,
            cs,
            sf,
            zl,
            rw,
            data4Chart1: [...columnDatas],
            list, // 饼状图统计数据相关
            cityName: params.orgId ? list[0].orgName : '',
          },
          () => {
            this.assignData();
          }
        );
      }
    });
  };
  render() {
    const pieConfig1 = this.getPieConfig(this.state.data4pie1);
    const pieConfig2 = this.getPieConfig(this.state.data4pie2);
    const pieConfig3 = this.getPieConfig(this.state.data4pie3);
    const pieConfig4 = this.getPieConfig(this.state.data4pie4);

    // 构建柱状图的数据源
    const dv = this.getColumnChartData();

    const scale = {
      上报个数: {
        type: 'log',
        tickInterval: 10, // 用于指定坐标轴各个标度点的间距，是原始数据之间的间距差值，tickCount 和 tickInterval 不可以同时声明。
      },
      linear: {
        nice: true,
      },
    };

    const { zbgl } = this.state;
    let { isLoading } = this.props;

    console.log(zbgl);
    if (!zbgl) {
      isLoading = true;
    }
    return (
      <div className={styles.dataScreen}>
        <Spin spinning={isLoading} tip="加载中...">
          <DataScreenDiv>
            <div className={'level1box'}>
              <div className={'bluePart'}></div>
              <div className={'whirtPart'}></div>
            </div>
            <div className={'floatBox'}>
              {/*顶部文字报表*/}
              <div className={'headerGroup'}>
                <div className={'title'}>
                  <span>
                    {`${this.state.year}年`}农村癌症人群筛查系统
                    {this.state.title}
                  </span>

                  <DatePicker
                    mode="year"
                    onPanelChange={this.handleDatePickerChange}
                    value={moment(this.state.year)}
                    format="YYYY"
                    style={{
                      position: 'absolute',
                      right: '20px',
                      background: '#1890FF',
                    }}
                  ></DatePicker>
                </div>
                {/*统计分析用卡片组*/}
                <div className={'analyseBox'}>
                  <div className={'tag'}></div>
                  <div className={'labelBox'}>
                    <span className={'label'}>指标</span>
                    <span className={'label'}>概览</span>
                  </div>
                  <div className={'cardBox'}>
                    <Row gutter={16} className={'heightMax'}>
                      <Col span={3} className={'heightMax'}>
                        <Card className={'card'} style={{ padding: '0px 20px' }}>
                          <div style={{ width: '100%', textAlign: 'center' }}>任务数</div>
                          <Divider className={'mdivider'} />
                          {/* {zbgl ?  : ""

                          } */}
                          <Statistic
                            style={{ marginBottom: '10px' }}
                            valueStyle={{ color: '#ffffff', textAlign: 'center', fontSize: '16px' }}
                            value={zbgl.allTaskNum + '人'}
                          />
                        </Card>
                      </Col>
                      <Col span={3} className={'heightMax'}>
                        <Card className={'card'} style={{ padding: '0px 20px' }}>
                          <div style={{ width: '100%', textAlign: 'center' }}>问卷人数</div>
                          <Divider className={'mdivider'} />
                          <Statistic
                            style={{ marginBottom: '10px' }}
                            valueStyle={{ color: '#ffffff', textAlign: 'center', fontSize: '16px' }}
                            value={zbgl.selfTestNum + '人'}
                          />
                        </Card>
                      </Col>

                      <Col span={3} className={'heightMax'}>
                        <Card className={'card'} style={{ padding: '0px 20px' }}>
                          <div style={{ width: '100%', textAlign: 'center' }}>高危人数</div>
                          <Divider className={'mdivider'} />
                          <Statistic
                            style={{ marginBottom: '10px' }}
                            valueStyle={{ color: '#ffffff', textAlign: 'center', fontSize: '16px' }}
                            value={zbgl.highRiskNum + '人'}
                          />
                        </Card>
                      </Col>
                      <Col span={3} className={'heightMax'}>
                        <Card className={'card'} style={{ padding: '0px 20px' }}>
                          <div style={{ width: '100%', textAlign: 'center' }}>胃镜检测数</div>
                          <Divider className={'mdivider'} />
                          <Statistic
                            style={{ marginBottom: '10px' }}
                            valueStyle={{ color: '#ffffff', textAlign: 'center', fontSize: '16px' }}
                            value={zbgl.neigongNum + '人'}
                          />
                        </Card>
                      </Col>
                      <Col span={3} className={'heightMax'}>
                        <Card className={'card'} style={{ padding: '0px 20px' }}>
                          <div style={{ width: '100%', textAlign: 'center' }}>阳性检测数(率)</div>
                          <Divider className={'mdivider'} />
                          <Statistic
                            style={{ marginBottom: '10px' }}
                            valueStyle={{ color: '#ffffff', textAlign: 'center', fontSize: '16px' }}
                            value={zbgl.positiveNum + '人' + '/' + zbgl.positiveL + '%'}
                          />
                        </Card>
                      </Col>
                      <Col span={3} className={'heightMax'}>
                        <Card className={'card'} style={{ padding: '0px 20px' }}>
                          <div style={{ width: '100%', textAlign: 'center' }}>早诊数(率)</div>
                          <Divider className={'mdivider'} />
                          <Statistic
                            style={{ marginBottom: '10px' }}
                            valueStyle={{ color: '#ffffff', textAlign: 'center', fontSize: '16px' }}
                            value={zbgl.zzNum + '人' + '/' + zbgl.zzL + '%'}
                          />
                        </Card>
                      </Col>
                      <Col span={3} className={'heightMax'}>
                        <Card className={'card'} style={{ padding: '0px 20px' }}>
                          <div style={{ width: '100%', textAlign: 'center' }}>治疗数(率)</div>
                          <Divider className={'mdivider'} />
                          <Statistic
                            style={{ marginBottom: '10px' }}
                            valueStyle={{ color: '#ffffff', textAlign: 'center', fontSize: '16px' }}
                            value={zbgl.treatmentNum + '人' + '/' + zbgl.treatmentL + '%'}
                          />
                        </Card>
                      </Col>
                      <Col span={3} className={'heightMax'}>
                        <Card className={'card'} style={{ padding: '0px 20px' }}>
                          <div style={{ width: '100%', textAlign: 'center' }}>随访数(率)</div>
                          <Divider className={'mdivider'} />
                          <Statistic
                            style={{ marginBottom: '10px' }}
                            valueStyle={{ color: '#ffffff', textAlign: 'center', fontSize: '16px' }}
                            value={zbgl.followupNum + '人' + '/' + zbgl.followupL + '%'}
                          />
                        </Card>
                      </Col>
                      {/*<Col span={4} className={'heightMax'}>*/}
                      {/*  <Card className={'card'}>*/}
                      {/*    <span>内镜检查人数</span>*/}
                      {/*    <Divider className={'mdivider'} />*/}
                      {/*    <Statistic*/}
                      {/*      valueStyle={{ color: '#ffffff' }}*/}
                      {/*      value={this.state.count4nj}*/}
                      {/*    />*/}
                      {/*  </Card>*/}
                      {/*</Col>*/}
                      {/*<Col span={4} className={'heightMax'}>*/}
                      {/*  <Card className={'card'}>*/}
                      {/*    <span>胃镜检查人数</span>*/}
                      {/*    <Divider className={'mdivider'} />*/}
                      {/*    <Statistic*/}
                      {/*      valueStyle={{ color: '#ffffff' }}*/}
                      {/*      value={this.state.count4wj}*/}
                      {/*    />*/}
                      {/*  </Card>*/}
                      {/*</Col>*/}
                    </Row>
                  </div>
                </div>
              </div>
              {/*底部图表*/}
              <div className={'level2box'}>
                <Row gutter={16} style={{ height: '100%' }}>
                  <Col span={7} style={{ height: '100%' }}>
                    <div style={{ height: '100%' }} className={'card echartsBox'}>
                      <AntVMap onSelectChange={this.handleOnSelectChange}></AntVMap>
                    </div>
                  </Col>
                  <Col span={17}>
                    <div className={'card echartsBox'}>
                      <div className={'floor'}>
                        <div
                          style={{
                            width: '100%',
                            display: 'flex',
                            justifyContent: 'space-between',
                          }}
                        >
                          <Title level={4}>各医院数据上报情况</Title>
                          {this.state.hospitalMapData[this.state.selectedCode] ? (
                            <Form labelCol={{ span: 6 }} wrapperCol={{ span: 12 }}>
                              <Form.Item label="医院">
                                <Select
                                  style={{ width: 160 }}
                                  placeholder="请选择医院"
                                  value={this.state.orgId}
                                  onChange={this.onSelectHospitalChange}
                                >
                                  {this.state.hospitalMapData[this.state.selectedCode].map(item => (
                                    <Select.Option key={item.id} value={item.id}>
                                      {item.orgName}
                                    </Select.Option>
                                  ))}
                                </Select>
                              </Form.Item>
                            </Form>
                          ) : (
                            ''
                          )}
                        </div>
                        <div style={{ width: '100%' }}>
                          {/*<Chart scale={scale} height={200} data={dv} forceFit>*/}
                          <Chart scale={scale} height={200} data={dv} autoFit>
                            <Axis name="月份" />
                            {/*<Axis name="上报个数" />*/}
                            <Axis
                              name="上报个数"
                              label={{
                                formatter: val => `${val}`,
                              }}
                            />
                            <Legend />
                            <Tooltip
                              crosshairs={{
                                type: 'y',
                              }}
                            />
                            <Geom
                              type="interval"
                              position="月份*上报个数"
                              // color={'name'}
                              color={['name', ['#507BFF', '#C4CEF7', '#01E16E']]}
                              adjust={[
                                {
                                  type: 'dodge',
                                  marginRatio: 1 / 32,
                                },
                              ]}
                            />
                          </Chart>
                        </div>
                      </div>
                      <Divider />
                      <Title level={4}>
                        {this.state.cityName ? this.state.cityName + '完成情况' : ''}
                      </Title>
                      <div className={'floor'}>
                        <Row gutter={16} style={{ width: '100%' }}>
                          <Col span={6}>
                            <div style={{ width: '100%' }}>
                              <h3 style={{ fontWeight: 'bold' }} level={4}>
                                初筛完成情况
                              </h3>
                            </div>
                            <Pie {...pieConfig1} />
                          </Col>
                          <Col span={6}>
                            <div style={{ width: '100%' }}>
                              <h3 style={{ fontWeight: 'bold' }} level={4}>
                                随访完成情况
                              </h3>
                            </div>
                            <Pie {...pieConfig2} />
                          </Col>
                          <Col span={6}>
                            <div style={{ width: '100%' }}>
                              <h3 style={{ fontWeight: 'bold' }} level={4}>
                                治疗完成情况
                              </h3>
                            </div>
                            <Pie {...pieConfig3} />
                          </Col>
                          <Col span={6}>
                            <div style={{ width: '100%' }}>
                              <h3 style={{ fontWeight: 'bold' }} level={4}>
                                任务完成情况
                              </h3>
                            </div>
                            <Pie {...pieConfig4} />
                          </Col>
                        </Row>
                      </div>
                    </div>
                  </Col>
                </Row>
              </div>
            </div>
          </DataScreenDiv>
        </Spin>
      </div>
    );
  }

  handleCancel = () => {
    this.setState({
      visible: false,
    });
  };
  /**
   * 点击地图板块
   * */
  handleOnSelectChange = (name, code) => {
    console.log('name', name, code);
    this.setState({
      selectedCode: code,
      orgId: undefined,
    });
    this.getHospitalDataInit({
      year: this.state.year,
      cityCode: code,
    });
  };
  /**
   * 设置按钮被点击
   */
  handleSettingIconClick = () => {
    this.setState({
      settingModalVisible: true,
    });
  };
  // 获取医院
  getHospitalTree = () => {
    this.execHttp('dataScreen/getCityByHospital').then(res => {
      console.log(res);
      if (!res.data.city.length) return;
      // 之前代码不动
      this.setState({
        hospitalTree: res.data.city,
      });
      // 2024/06/19 修改
      const hospitalMapData = {};
      res.data.city.forEach(element => {
        hospitalMapData[element.city_code] = element.org;
      });

      this.setState({
        hospitalMapData,
        // selectedCode: [res.data.city[0].city_code]
      });
    });
  };

  // data.map(item => {
  //   if (item.org) {
  //     return (
  //       <TreeNode title={item.city_name ? item.city_name : item.title} key={item.key} dataRef={item}>
  //         {this.renderTreeNodes(item.org)}
  //       </TreeNode>
  //     );
  //   }
  //   return <TreeNode key={item.key} {...item} />;

  // });
  //

  /**
   * 设置按钮确认被点击
   */
  // handleSettingModalOkClick = () => {

  //   this.setState({ month: this.state.selectedMonth, settingModalVisible: false }, () => {
  //     this.getDataScreen();
  //   });
  // };

  /**
   * 设置按钮取消被点击
   */
  handleSettingModalCancelClick = () => {
    this.setState({
      settingModalVisible: false,
    });
  };

  /**
   * 月份切换
   * @param value
   */
  handleMonthChange = value => {
    this.setState({
      selectedMonth: value,
    });
  };
}

export default DataScreen;
